<template>
  <div style="height:100%">
    <div id="mapDiv" class="mapDiv"></div>
    <div class="search">
      <img src="@/assets/img/search.png" class="back_search" />
      <input class="input_search" v-model="searchVal" @keyup.enter="search" placeholder="项目名称或关键字" />
      <img src="@/assets/img/clear.png" class="clear" v-if="searchVal" @click="clear" />
    </div>
    <div class="back" @click="toProjectList">
      <img src="@/assets/img/back.png" style="width:24px;height:24px" />
    </div>
    <div class="menu" @click="menu = true">
      <img src="@/assets/img/menu.png" style="width:24px;height:24px" />
    </div>
    <popup v-model="menu" position="right" class="menuPop">
      <div style="width:250px;height:100%">
        <div class="menuTitle">
          应用
        </div>
        <grid 
          :cols="3"
          :show-vertical-dividers="false"
          :show-lr-borders="false">
          <grid-item
            v-for="(i,index) in menuList "
            :key="index"
            :link="i.src"
            :label="i.label"
            @on-item-click="selectEvent(index)"
            class="menuItem"
          >
            <img :src="i.img" slot="icon" class="menuImg"/>
          </grid-item>
        </grid>
      </div>
    </popup>
    <!-- <tabbar class="type">
          <tabbar-item @on-item-click="showProject" selected>
            <img slot="icon" src="@/assets/img/project.png" />
            <img slot="icon-active" src="@/assets/img/project_active.png" />
            <span slot="label">项目</span>
          </tabbar-item>
          <tabbar-item  @on-item-click="showVideo">
                <img slot="icon" src="@/assets/img/watch.png">
                <img slot="icon-active" src="@/assets/img/watch_active.png">
                <span slot="label">监控</span>
          </tabbar-item>
          <tabbar-item @on-item-click="showPerson">
            <img slot="icon" src="@/assets/img/men.png" />
            <img slot="icon-active" src="@/assets/img/men_active.png" />
            <span slot="label">人员</span>
          </tabbar-item>
          <tabbar-item @on-item-click="showDanger">
            <img slot="icon" src="@/assets/img/danger.png" />
            <img slot="icon-active" src="@/assets/img/danger_active.png" />
            <span slot="label">隐患</span>
          </tabbar-item>
          <tabbar-item @on-item-click="showQuality">
            <img slot="icon" src="@/assets/img/quality.png" />
            <img slot="icon-active" src="@/assets/img/quality_active.png" />
            <span slot="label">缺陷</span>
          </tabbar-item>
          <tabbar-item @on-item-click="showAuto">
            <img slot="icon" src="@/assets/img/quality.png" />
            <img slot="icon-active" src="@/assets/img/quality_active.png" />
            <span slot="label">自动化监测</span>
          </tabbar-item>
          <tabbar-item @on-item-click="showNormal">
            <img slot="icon" src="@/assets/img/quality.png" />
            <img slot="icon-active" src="@/assets/img/quality_active.png" />
            <span slot="label">传统监测</span>
          </tabbar-item>
    </tabbar>-->
    <x-switch
      class="switch"
      title
      v-model="switchFlag"
      v-show="switchShow"
      :on-click="changeSwitchFlag"
    ></x-switch>
    <popup v-model="projectDetail" should-scroll-top-on-show max-height="50%">
      <DIV>
        <photo-upload
          title
          :pageToken="pageToken"
          :fieldToken="fieldToken"
          :imgWidth="imgWidth"
          v-model="attachment"
          :readonly="true"
        ></photo-upload>
      </DIV>
      <h2 style="margin-left:15px">{{title}}</h2>
      <group>
        <cell title="项目编号" v-model="projectNo" class="info"></cell>
        <cell title="项目类型" v-model="prjtype" class="info"></cell>
        <cell title="项目总投资" v-model="contractsum" class="info"></cell>
        <cell title="项目建设周期" v-model="period" class="info"></cell>
        <cell title="项目标段" v-model="prjbdst" class="info"></cell>
        <cell title="项目负责人" v-model="prjmanagefullname" class="info"></cell>
        <cell title="建设性质" v-model="category" class="info"></cell>
      </group>
      <div class="introduce">项目简介</div>
      <div class="introduce" style="color:#999999">{{introduce}}</div>
    </popup>
    <popup v-model="dangerFlag" height="170px" style="background-color:#ffffff">
      <div class="afterDiv">
        <photo-upload
          :pageToken="pageToken"
          :fieldToken="fieldToken"
          :imgWidth="'180'"
          :imgHeight="'130'"
          v-model="attachment"
          :readonly="true"
        ></photo-upload>
        <div>
          <div class="afterTitle">{{title}}</div>
          <div class="afterStyle">{{projectNo}}</div>
          <div class="afterStyle">{{prjtype}}</div>
        </div>
      </div>
      <div style="margin:10px;display:flex" @click="getDangerDetail">
        <div class="echarts_photo">
          <div id="danger" style="width:170px;height:127px;float:left"></div>
          <div>整改情况比例</div>
        </div>
        <div style="width:170px;height:127px">
          <div class="scoreRank">
            <h1>{{score}}</h1>
            <label>{{month}}</label>
          </div>
        </div>
      </div>
    </popup>
    <popup v-model="qualityFlag" height="170px" style="background-color:#ffffff">
      <div class="afterDiv">
        <photo-upload
          :pageToken="pageToken"
          :fieldToken="fieldToken"
          :imgWidth="'180'"
          :imgHeight="'130'"
          v-model="attachment"
          :readonly="true"
        ></photo-upload>
        <div>
          <div class="afterTitle">{{title}}</div>
          <div class="afterStyle">{{projectNo}}</div>
          <div class="afterStyle">{{prjtype}}</div>
        </div>
      </div>
      <div style="margin:10px;display:flex" @click="getQualityDetail">
        <div class="echarts_photo">
          <div id="quality" style="width:170px;height:127px;float:left"></div>
          <div>整改情况比例</div>
        </div>
        <div style="width:170px;height:127px">
          <div class="scoreRank">
            <h1>{{qualityScore}}</h1>
            <label>{{qualityMonth}}</label>
          </div>
        </div>
      </div>
    </popup>
    <popup v-model="personFlag" class="person_popup" :show-mask="false">
      <div class="tab_div">
        <div class="select_div">
          <div class="tab active" id="proPerson" @click="selectProPerson">项目人员</div>
          <div class="baseLine" id="proBase"></div>
        </div>
        <div class="select_div">
          <div class="tab" id="dutyPerson" @click="selectDutyPerson">值班人员</div>
          <div class="baseLine" id="dutyBase" style="display:none"></div>
        </div>
      </div>
    </popup>
    <popup v-model="unitFlag" height="220px" style="background-color:#ffffff">
      <div class="afterDiv">
        <photo-upload
          :pageToken="pageToken"
          :fieldToken="fieldToken"
          :imgWidth="'180'"
          :imgHeight="'130'"
          v-model="attachment"
          :readonly="true"
        ></photo-upload>
        <div>
          <div class="afterTitle">{{title}}</div>
          <div class="afterStyle">{{projectNo}}</div>
          <div class="afterStyle">{{prjtype}}</div>
        </div>
      </div>
      <div @click="toPersonList">
        <div>
          <div class="unit_title_div">
            <img src="../../assets/img/shejiUnit.png" class="unit_img" />
            <div class="unit">设计单位</div>
          </div>
          <div class="unit_dept">{{shejiDept}}</div>
          <div class="unit_num">{{shejiNum}}人</div>
        </div>
        <div>
          <div class="unit_title_div">
            <img src="../../assets/img/shigongUnit.png" class="unit_img" />
            <div class="unit">施工单位</div>
          </div>
          <div class="unit_dept">{{shigongDept}}</div>
          <div class="unit_num">{{shigongNum}}人</div>
        </div>
        <div>
          <div class="unit_title_div">
            <img src="../../assets/img/jianliUnit.png" class="unit_img" />
            <div class="unit">监理单位</div>
          </div>
          <div class="unit_dept">{{jianliDept}}</div>
          <div class="unit_num">{{jianliNum}}人</div>
        </div>
        <div>
          <div class="unit_title_div">
            <img src="../../assets/img/jiansheUnit.png" class="unit_img" />
            <div class="unit">建设单位</div>
          </div>
          <div class="unit_dept">{{jiansheDept}}</div>
          <div class="unit_num">{{jiansheNum}}人</div>
        </div>
      </div>
    </popup>
    <popup v-model="dutyFlag" height="150px" style="background-color:#ffffff">
      <div class="afterDiv" @click="toPersonOnDuty">
        <photo-upload
          :pageToken="pageToken"
          :fieldToken="fieldToken"
          :imgWidth="'180'"
          :imgHeight="'130'"
          v-model="attachment"
          :readonly="true"
        ></photo-upload>
        <div>
          <div class="afterTitle">{{title}}</div>
          <div class="afterStyle">{{projectNo}}</div>
          <div class="afterStyle">{{prjtype}}</div>
        </div>
      </div>
      <!-- <div v-for="(item,index) in dutyPersonList" :key="index" style="display:flex">
           <div v-if="item.map.userPhoto == ''" class="img_div">
                <div class="user_nophoto" v-if="item.map.userFullName.length < 3">
                    {{item.map.userFullName}}    
                </div>
                <div class="user_nophoto" v-else>
                    {{item.map.userFullName.substring(0,1)}}
                </div>
            </div>
            <div v-else class="img_div">
                <img :src="item.map.url" class="userphoto"/>
            </div>
            <div class="text_area">
                <div>
                    <div class="username">{{item.map.userFullName}}</div>
                    <div class="same_text">{{item.map.unitName}}</div>
                </div>
                <img v-if="item.map.signState == 'false'" src="../../assets/img/offline.png" class="line_img"/>
                <img v-else src="../../assets/img/online.png" class="line_img"/>
            </div>
      </div>-->
    </popup>
    <x-dialog
      hide-on-blur
      v-model="showDialog"
      :dialog-style="{'max-width': '100%', width: '100%', height: '50%'}"
    >
      <div class="autoInfo">
        <div>
          <span>监测点：{{autoDotName}}</span>
        </div>
        <div>
          <span>监测方案：{{autoScheme}}</span>
        </div>
        <div>
          <span>监测对象：{{autoObject}}</span>
        </div>
      </div>
      <div id="autoSafety" :style="canvasStyle"></div>
    </x-dialog>
    <div class="autoRemarks" v-show="autoFlag">
      <div class="autoRemarkDiv">
        <img src="@/assets/img/auto_0.png" class="autoRemarkImg" />
        <span class="autoRemarkText">{{auto_0}}</span>
      </div>
      <div class="autoRemarkDiv">
        <img src="@/assets/img/auto_1.png" class="autoRemarkImg" />
        <span class="autoRemarkText">{{auto_1}}</span>
      </div>
      <div class="autoRemarkDiv">
        <img src="@/assets/img/auto_2.png" class="autoRemarkImg" />
        <span class="autoRemarkText">{{auto_2}}</span>
      </div>
      <div class="autoRemarkDiv">
        <img src="@/assets/img/auto_3.png" class="autoRemarkImg" />
        <span class="autoRemarkText">{{auto_3}}</span>
      </div>
    </div>
    <popup v-model="normalFlag" class="person_popup" :show-mask="false">
      <div class="tab_div">
        <div class="select_div">
          <div class="tab active" id="bridge" @click="selectTraDot">桥梁</div>
          <div class="baseLine" id="bridgeBase"></div>
        </div>
        <div class="select_div">
          <div class="tab" id="bedrockDatumPoint" @click="selectTraDot1">基岩基准点</div>
          <div class="baseLine" id="bedrockDatumPointBase" style="display:none"></div>
        </div>
      </div>
    </popup>
    <x-dialog
      hide-on-blur
      v-model="showNormalDialog"
      :dialog-style="{'max-width': '100%', width: '100%', height: '50%'}"
    >
      <div class="autoInfo">
        <div>
          <span>监测点：{{normalDotName}}</span>
        </div>
        <div>
          <span>监测方案：{{normalScheme}}</span>
        </div>
        <div>
          <span>监测项目：{{normalProject}}</span>
        </div>
        <div>
          <span>监测对象：{{normalObject}}</span>
        </div>
      </div>
      <div id="normalSafety" :style="canvasStyle"></div>
    </x-dialog>
    <div class="autoRemarks" v-show="normalFlag && flag == 0">
      <div class="autoRemarkDiv">
        <img src="@/assets/img/tradot_0.png" class="autoRemarkImg" />
        <span class="autoRemarkText">{{tradot_0}}</span>
      </div>
      <div class="autoRemarkDiv">
        <img src="@/assets/img/tradot_1.png" class="autoRemarkImg" />
        <span class="autoRemarkText">{{tradot_1}}</span>
      </div>
      <div class="autoRemarkDiv">
        <img src="@/assets/img/tradot_2.png" class="autoRemarkImg" />
        <span class="autoRemarkText">{{tradot_2}}</span>
      </div>
      <div class="autoRemarkDiv">
        <img src="@/assets/img/tradot_3.png" class="autoRemarkImg" />
        <span class="autoRemarkText">{{tradot_3}}</span>
      </div>
    </div>
  </div>
</template>
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入饼图组件
require("echarts/lib/chart/pie");
require("echarts/lib/chart/line");
// 引入提示框和图例组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");
require("echarts/lib/component/graphic");
import { wgs84togcj02 } from "../../assets/js/utils";
import $ from "jquery";
import * as L from "leaflet";
import { Tabbar, TabbarItem, XSwitch, XDialog } from "vux";
import { Popup, Group, Cell } from "vux";
import { Tab, TabItem, Grid, GridItem } from "vux";
import Vue from "vue";
//全局使用$vue代替this
var $vue = {};
var map = null;
var marker = null;
var prjPointGroup = [];
var prjPointlabelGroup = [];
var porPointGroup = [];
var flag = 0;
var pi = 3.14159265358979324;
var a = 6378245.0;
var ee = 0.00669342162296594323;
var PointMark;
export default {
  name: "map",
  components: {
    Tabbar,
    TabbarItem,
    Popup,
    Group,
    Cell,
    Tab,
    TabItem,
    XSwitch,
    XDialog,
    Grid,
    GridItem
  },
  beforeCreate() {
    //全局使用$vue代替this
    $vue = this;
  },
  data() {
    // console.log("111111")
    // console.log($vue)
    return {
      menuList: [
        {
          label: "项目",
          img: require("../../assets/img/project_active.png")
        },
        {
          label: "人员",
          img: require("../../assets/img/men.png")
        },
        {
          label: "隐患",
          img: require("../../assets/img/danger.png")
        },
        {
          label: "缺陷",
          img: require("../../assets/img/quality.png")
        },
        {
          label: "传统监测",
          img: require("../../assets/img/normal.png")
        },
        {
          label: "自动化监测",
          img: require("../../assets/img/auto.png")
        }
      ],
      searchVal: "",
      imgWidth: "100%",
      projectList: [],
      basicInfo: [],
      pageToken: "",
      fieldToken: "",
      title: "",
      projectNo: "",
      prjtype: "",
      contractsum: "",
      prjbdst: "",
      prjmanagefullname: "",
      category: "",
      period: "",
      introduce: "",
      attachment: "",
      projectDetail: false,
      dangerFlag: false,
      month: "",
      score: "",
      projectId: "",
      prjname: "",
      isPrjManag: "",
      qualityFlag: false,
      qualityMonth: "",
      qualityScore: "",
      personFlag: false,
      unitFlag: false,
      dutyFlag: false,
      shejiDept: "", //设计单位
      shejiNum: "",
      shigongDept: "", //施工单位
      shigongNum: "",
      jianliDept: "", //监理单位
      jianliNum: "",
      jiansheDept: "", //建设单位
      jiansheNum: "",
      personProjectId: "",
      personOrDuty: 0,
      dutyPersonList: [],
      switchFlag: true,
      switchShow: false,
      isEmpty: 0,
      isDataEmpty: 0,
      menu: false,
      cum: [], //自动化监测数据
      cumdot: [], //自动化监测数据
      autoDotList: [], //自动化监测数据列表
      showDialog: false,
      canvasStyle: {
        height: "300px",
        width: ""
      },
      canvasWidth: "",
      autoScheme: "", //监测方案
      autoObject: "", //监测对象
      autoDotName: "", //监测点
      autoDate: [],
      autoThisChange: [],
      autoCumChange: [],
      autoRateChange: [],
      autolUnit: "",
      normalFlag: false,
      flag: 0, //0为桥梁 1为基岩基准点
      cumT: [], //传统监测数据
      cumdotT: [], //传统监测数据
      normalScheme: "", //监测方案
      normalObject: "", //监测对象
      normalDotName: "", //监测点
      normalProject: "", //监测项目
      showNormalDialog: false,
      normalDate: [],
      normalThisChange: [],
      normalCumChange: [],
      normalRateChange: [],
      normalUnit: "",
      cumChange: 0,
      rateChange: 0,
      auto_0: "24<D<30mm",
      auto_1: "18<D<24mm",
      auto_2: "9<D<18mm",
      auto_3: "0<D<9mm",
      autoFlag: false, //自动化监测左侧提示框
      tradot_0: "8<D<10mm 1.6%<Q<2.0%",
      tradot_1: "6<D<8mm 1.2%<Q<1.6%",
      tradot_2: "3<D<6mm 0.6%<Q<1.2%",
      tradot_3: "0<D<3mm 0<Q<0.6%"
    };
  },
  mounted() {
    this.canvasWidth = document.body.clientWidth;

    this.pageToken = this.guid();
    this.fieldToken = this.guid();
    //绘制地图
    L.TileLayer.ChinaProvider = L.TileLayer.extend({
      initialize: function(type, options) {
        // (type, Object)
        var providers = L.TileLayer.ChinaProvider.providers;

        var parts = type.split(".");

        var providerName = parts[0];
        var mapName = parts[1];
        var mapType = parts[2];

        var url = providers[providerName][mapName][mapType];
        options.subdomains = providers[providerName].Subdomains;

        L.TileLayer.prototype.initialize.call(this, url, options);
      }
    });

    L.TileLayer.ChinaProvider.providers = {
      TianDiTu: {
        Normal: {
          Map:
            "https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=5d8707ab9fc8e2cc2eb8737434da82dd",
          Annotion:
            "https://t{s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=5d8707ab9fc8e2cc2eb8737434da82dd"
        },
        Satellite: {
          Map:
            "https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=5d8707ab9fc8e2cc2eb8737434da82dd",
          Annotion:
            "https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=5d8707ab9fc8e2cc2eb8737434da82dd"
        },
        Terrain: {
          Map:
            "https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=5d8707ab9fc8e2cc2eb8737434da82dd",
          Annotion:
            "https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=5d8707ab9fc8e2cc2eb8737434da82dd"
        },
        Subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
      }
    };

    L.tileLayer.chinaProvider = function(type, options) {
      return new L.TileLayer.ChinaProvider(type, options);
    };
    ("use strict");
    var imgm = L.tileLayer.chinaProvider("TianDiTu.Satellite.Map", {
        maxZoom: 18,
        minZoom: 5
      }),
      imga = L.tileLayer.chinaProvider("TianDiTu.Satellite.Annotion", {
        maxZoom: 18,
        minZoom: 5
      });

    var image = L.layerGroup([imgm, imga]);

    var baseLayers = {
      影像: image
    };

    var overlayLayers = {};

    map = L.map("mapDiv", {
      center: [22.517824, 113.874084, 22],
      zoom: 13,
      layers: [image],
      zoomControl: false,
      doubleClickZoom: false
    });
    L.control.layers(baseLayers, overlayLayers).addTo(map);

    this.showProject();
    this.getCumData();
    this.getCumTData();
    
  },
  methods: {
    selectEvent(i) {
      console.log(this.menuList[i]);
      switch (i) {
        case 0:
          this.showProject();
          this.menuList[i].img = require('../../assets/img/project_active.png')
          this.menuList[1].img = require('../../assets/img/men.png')
          this.menuList[2].img = require('../../assets/img/danger.png')
          this.menuList[3].img = require('../../assets/img/quality.png')
          this.menuList[4].img = require('../../assets/img/normal.png')
          this.menuList[5].img = require('../../assets/img/auto.png')
          break;
        case 1:
          this.showPerson();
          this.menuList[i].img = require('../../assets/img/men_active.png')
          this.menuList[0].img = require('../../assets/img/project.png')
          this.menuList[2].img = require('../../assets/img/danger.png')
          this.menuList[3].img = require('../../assets/img/quality.png')
          this.menuList[4].img = require('../../assets/img/normal.png')
          this.menuList[5].img = require('../../assets/img/auto.png')
          break;
        case 2:
          this.showDanger();
          this.menuList[i].img = require('../../assets/img/danger_active.png')
          this.menuList[0].img = require('../../assets/img/project.png')
          this.menuList[1].img = require('../../assets/img/men.png')
          this.menuList[3].img = require('../../assets/img/quality.png')
          this.menuList[4].img = require('../../assets/img/normal.png')
          this.menuList[5].img = require('../../assets/img/auto.png')
          break;
        case 3:
          this.showQuality();
          this.menuList[i].img = require('../../assets/img/quality_active.png')
          this.menuList[0].img = require('../../assets/img/project.png')
          this.menuList[1].img = require('../../assets/img/men.png')
          this.menuList[2].img = require('../../assets/img/danger.png')
          this.menuList[4].img = require('../../assets/img/normal.png')
          this.menuList[5].img = require('../../assets/img/auto.png')
          break;
        case 4:
          this.showNormal();
          this.menuList[i].img = require('../../assets/img/normal_active.png')
          this.menuList[0].img = require('../../assets/img/project.png')
          this.menuList[1].img = require('../../assets/img/men.png')
          this.menuList[2].img = require('../../assets/img/danger.png')
          this.menuList[3].img = require('../../assets/img/quality.png')
          this.menuList[5].img = require('../../assets/img/auto.png')
          break;
        case 5:
          this.showAuto();
          this.menuList[i].img = require('../../assets/img/auto_active.png')
          this.menuList[0].img = require('../../assets/img/project.png')
          this.menuList[1].img = require('../../assets/img/men.png')
          this.menuList[2].img = require('../../assets/img/danger.png')
          this.menuList[3].img = require('../../assets/img/quality.png')
          this.menuList[4].img = require('../../assets/img/normal.png')
          break;
          default:
            break;
      }
    },
    getCumTData() {
      var params = { _method: "PMHSE_TRADATAIN.selectCum" };
      let json = {
        FixJSON: JSON.stringify(params)
      };
      this.$ajax({
        url: this.COMMON_URL,
        method: "post",
        data: json
      }).then(res => {
        console.log("cum", res);
        var list = res.data.RS;
        for (var i = 0; i < list.length; i++) {
          this.cumT.push(list[i].CUMCHANGE);
          this.cumdotT.push(list[i].AUTODOTNAME);
        }
      });
    },
    getCumData() {
      var params = { _method: "PMHSE_NEWADOT1.selectCum1" };
      let json = {
        FixJSON: JSON.stringify(params)
      };
      this.$ajax({
        url: this.COMMON_URL,
        method: "post",
        data: json
      }).then(res => {
        console.log("cum", res);
        var list = res.data.RS;
        for (var i = 0; i < list.length; i++) {
          this.cum.push(list[i].CUMCHANGE);
          this.cumdot.push(list[i].AUTODOTNAME);
        }
      });
    },
    // change(){
    //     if(this.projectDetail == true&&flag==1){
    //         flag=0;
    //         console.log(this.projectDetail)
    //         this.projectDetail = false;
    //     }
    // },
    // showInfo(index){
    //     //debugger;
    //     console.log(index)
    // },
    toProjectList() {
      this.$router.push({
        path: "/index/projectList",
        name: "projectList"
      });
    },
    showProject() {
      this.menu = false;
      this.personFlag = false;
      this.switchShow = false;
      this.normalFlag = false;
      this.autoFlag = false;
      console.log("项目项目项目");
      this.getPrjDataList();
    },
    //获取项目列表
    getPrjDataList() {
      //let prjDataList = [];
      var params = '{"_method":"SYS_PROJECTINFO.getPrjDataList"}';
      this.$ajax({
        url: this.COMMON_URL,
        async: false,
        method: "post",
        // data: this.signMD5({
        //   FixJSON: params
        // })
        data: {
          FixJSON: params
        }
      }).then(res => {
        //console.log(res)
        this.projectList = res.data.prjDataList;
        console.log("res", this.projectList);
        this.drawProToMap(this.projectList);
      });
    },
    drawProToMap(list) {
      var test;
      clearInterval(PointMark);
      for (var i = 0; i < prjPointGroup.length; i++) {
        map.removeLayer(prjPointGroup[i]);
      }
      prjPointGroup.splice(0, prjPointGroup.length);
      for (var i = 0; i < porPointGroup.length; i++) {
        map.removeLayer(porPointGroup[i]);
      }
      porPointGroup.splice(0, porPointGroup.length);
      for (var i = 0; i < prjPointlabelGroup.length; i++) {
        map.removeLayer(prjPointlabelGroup[i]);
      }
      prjPointlabelGroup.splice(0, prjPointlabelGroup.length);
      //debugger;

      //console.log(this.COMMON_URL)
      var prjDataList = list;
      //var datajson = [{prjname:"月亮湾立交-桂庙路主线跨线桥工程",position:[22.517824,113.874084]},{prjname:"月亮湾立交-桂庙路主线",position:[22.557824,113.904084]}];
      var i = 0;
      PointMark = setInterval(function() {
        if (i < prjDataList.length) {
          var prjname = prjDataList[i].PRJPLACE;
          var prjFullNameVal = prjDataList[i].PROJECTNAME;
          var positionStr = prjDataList[i].CENTERPOSTION;
          //var position = positionStr.substring(7,positionStr.indexOf(")"));
          var position = [];
          position.push(positionStr.substring(7, positionStr.indexOf(",")));
          position.push(
            positionStr.substring(
              positionStr.indexOf(" ") + 1,
              positionStr.indexOf(")")
            )
          );
          var positionArea = prjDataList[i].POSTION;
          var prjGuid = prjDataList[i].PROJECTID;
          var marker = L.marker(position, {
            // icon: L.divIcon({
            //   className: "label-text",
            //   //onmouseover="over(this,\''+prjGuid+'\',\''+positionStr+'\')" onmouseleave="leave(this)" onclick="prjClick(\''+prjGuid+'\');"
            //   html:
            //     '<div class="popdiv" id="' +
            //     prjGuid +
            //     '" style="width:auto;left:-50%;position: relative;z-index:100;white-space: nowrap">' +
            //     prjname +
            //     '<lable style="display:none">' +
            //     positionArea +
            //     '</lable><lable style="display:none">' +
            //     prjGuid +
            //     '</lable></div><div class="leaflet-popup-tip-containerMark" style="left:-50%;position: relative;"><div class="leaflet-popup-tip" style="background-color: #4D8AFF;opacity:0.9;"></div></div>',
            //   prjEzName: prjname,
            //   prjFullName: prjFullNameVal
            // })
            icon: L.icon({
              iconUrl: require("../../assets/img/projectIcon.png"),
              iconSize: [34, 40],
              iconAnchor: [17, 27],
              popupAnchor: [11, 27],
              className: "pointIcon",
              prjEzName: prjname,
              prjFullName: prjFullNameVal
            })
          }).addTo(map);
          marker.on("click", function(e) {
            $vue.projectDetail = true;
            //console.log("marker click")
            //console.log(e)
            //console.log(prjGuid)
            //this.prjClick(prjGuid)
            var params =
              '{"_method":"formService.getFormData","requestEventData":{"eventType":"formInitEvent","formType":1,"bizObjId":"SYS_PROJECTINFO","formId":"PMPRO_SYS_PROJECTINFO_add_new"},"useType":"view","getData":{"useType":"view","objName":"SYS_PROJECTINFO","relatedObj":["SYS_PROJECTINFO"],"pk":[{"key":"PROJECTID","value":"' +
              prjGuid +
              '"}]},"getSysVar":{"CREATEUSERFULLNAME":"{sysLoginUser.userName}","CREATEUSERNAME":"{sysLoginUser.loginId}","CREATEDATE":"{sysDate.Now}"},"getFormVerify":{"objName":"SYS_PROJECTINFO","viewId":"PMPRO_SYS_PROJECTINFO_add_new"},"getToolbar":{"useType":"view","objName":"SYS_PROJECTINFO","viewId":"PMPRO_SYS_PROJECTINFO_add_new"}}';
            $vue
              .$ajax({
                // url: '/qhszpm/servlet/Action.cmd?_isBreak=false&objName=SYS_PROJECTINFO&_useType=view&_pk=PROJECTID&_pkValue=' + prjGuid + '&_treeNodeId=&_treeNodeName=undefined',
                url:
                  $vue.COMMON_URL +
                  "?_isBreak=false&objName=SYS_PROJECTINFO&_useType=view&_pk=PROJECTID&_pkValue=" +
                  prjGuid +
                  "&_treeNodeId=&_treeNodeName=undefined",
                method: "post",
                data: {
                  FixJSON: params
                }
              })
              .then(res => {
                console.log("projectInfo", res);
                // console.log(JSON.parse(res))
                // var obj = JSON.parse(res)
                // var info = obj.getData.SYS_PROJECTINFO[0]
                var info = res.data.getData.SYS_PROJECTINFO[0];
                //console.log($vue)
                $vue.title = info.PROJECTNAME.val;
                $vue.projectNo = info.PROJECTNO.val;
                $vue.prjtype = info.PRJTYPE.val;
                $vue.contractsum = info.CONTRACTSUM.val + "万元";
                $vue.prjbdst = info.PRJBDST.val;
                $vue.prjmanagefullname = info.PRJMANAGERFULLNAME.val;
                $vue.category = info.PRJCATEGORY.val;
                $vue.introduce = info.TARGET.val;
                var starttime = info.STARTDATE.val.substring(0, 10);
                var finishtime = info.FINISHDATE.val.substring(0, 10);
                $vue.period = starttime + "~" + finishtime;
                $vue.attachment = info.ATTACHMENT2.val;
              });
          });
          prjPointGroup.push(marker);
          i++;
        }
      }, 20);
    },
    showVideo() {
      this.personFlag = false;
      console.log("监控监控监控");
    },
    showPerson() {
      this.menu = false;
      this.normalFlag = false;
      this.personFlag = true;
      this.switchShow = true;
      this.switchFlag = true;
      this.autoFlag = false;
      console.log("人员人员人员");
      clearInterval(PointMark);
      var data = [];
      var params = '{"_method":"HOME_FIX_PERMISSION_MENU.getProInfo"}';
      this.$ajax({
        url: this.COMMON_URL,
        // data: this.signMD5({
        //   FixJSON: params
        // }),
        data: {
          FixJSON: params
        },
        method: "post",
        async: false
      }).then(res => {
        console.log(res);
        data = res.data.data;
        this.drawPersonToMap(data, this.personOrDuty);
      });
    },
    drawPersonToMap(data, flag) {
      //处理经纬度
      for (var i = 0; i < data.length; i++) {
        var temp = data[i].CENTERPOSITION.substring(7);
        var temp1 = temp.substring(0, temp.indexOf(","));
        var temp2 = temp.substring(temp.indexOf(" ") + 1, temp.indexOf(")"));
        var temp3 = temp1 + "," + temp2;
        var arr = temp3.split(",");
        data[i].CENTERPOSITION = arr;
      }
      console.log(data);
      for (var i = 0; i < prjPointGroup.length; i++) {
        map.removeLayer(prjPointGroup[i]);
      }
      prjPointGroup.splice(0, prjPointGroup.length);
      for (var i = 0; i < porPointGroup.length; i++) {
        map.removeLayer(porPointGroup[i]);
      }
      porPointGroup.splice(0, porPointGroup.length);
      for (var i = 0; i < prjPointlabelGroup.length; i++) {
        map.removeLayer(prjPointlabelGroup[i]);
      }
      prjPointlabelGroup.splice(0, prjPointlabelGroup.length);
      if (flag == 0) {
        var i = 0;
        PointMark = setInterval(function() {
          if (i < data.length) {
            var prjName = data[i].PRJPLACE;
            var prjFullNameVal = data[i].PROJECTNAME;
            var marker = L.marker(data[i].CENTERPOSITION, {
              // icon: L.divIcon({
              //   className: "label-text",
              //   //onmouseover="overPor(this)" onmouseleave="leavePor(this)"
              //   html:
              //     '<div class="popdiv" style="width:auto;left:-50%;position: relative;z-index:100;background:#6C5CFF;white-space: nowrap;">' +
              //     prjName +
              //     "<lable>&nbsp;&nbsp;&nbsp;&nbsp;" +
              //     data[i].TOTAL +
              //     '</lable></div><div class="leaflet-popup-tip-containerMark" style="left:-50%;position: relative;"><div class="leaflet-popup-tip" style="background-color: #6C5CFF;opacity:0.9;"></div></div>',
              //   prjEzName: prjName,
              //   prjFullName: prjFullNameVal
              // })
              icon: L.icon({
                iconUrl: require("../../assets/img/pornnelIcon.png"),
                iconSize: [34, 40],
                iconAnchor: [17, 27],
                popupAnchor: [11, 27],
                className: "pointIcon",
                prjEzName: prjName,
                prjFullName: prjFullNameVal,
                dataNum: data[i].TOTAL
              })
            });
            if (data[i].TOTAL != 0) {
              marker.addTo(map);
              var markerlabel = L.marker(data[i].CENTERPOSITION, {
                icon: L.divIcon({
                  className: "label-text",
                  html:
                    '<span class="mapIconLabSpan">' + data[i].TOTAL + "<span>",
                  prjEzName: prjName,
                  prjFullName: prjFullNameVal,
                  dataNum: data[i].TOTAL
                })
              }).addTo(map);
              prjPointlabelGroup.push(markerlabel);
            }

            $vue.porPointBind(
              marker,
              prjName,
              data[i].PROJECTID,
              prjFullNameVal,
              data[i].PROJECTNO,
              data[i].ATTACHMENT2,
              data[i].PRJTYPE
            ); //绑定项目人员标记点事件
            prjPointGroup.push(marker);
            i++;
          }
        }, 20);
      } else {
        var i = 0;
        PointMark = setInterval(function() {
          if (i < data.length) {
            var prjName = data[i].PRJPLACE;
            var prjFullNameVal = data[i].PROJECTNAME;
            var marker = L.marker(data[i].CENTERPOSITION, {
              // icon: L.divIcon({
              //   className: "label-text",
              //   //onmouseover="overPor(this)" onmouseleave="leavePor(this)"
              //   html:
              //     '<div class="popdiv" style="width:auto;left:-50%;position: relative;z-index:100;background:#6C5CFF;white-space: nowrap;">' +
              //     prjName +
              //     "<lable>&nbsp;&nbsp;&nbsp;&nbsp;" +
              //     data[i].DUTYNUM +
              //     '</lable></div><div class="leaflet-popup-tip-containerMark" style="left:-50%;position: relative;"><div class="leaflet-popup-tip" style="background-color: #6C5CFF;opacity:0.9;"></div></div>',
              //   prjEzName: prjName,
              //   prjFullName: prjFullNameVal
              // })
              icon: L.icon({
                iconUrl: require("../../assets/img/pornnelIcon.png"),
                iconSize: [34, 40],
                iconAnchor: [17, 27],
                popupAnchor: [11, 27],
                className: "pointIcon",
                prjEzName: prjName,
                prjFullName: prjFullNameVal,
                dataNum: data[i].DUTYNUM
              })
            });
            if (data[i].DUTYNUM != 0) {
              marker.addTo(map);
              var markerlabel = L.marker(data[i].CENTERPOSITION, {
                icon: L.divIcon({
                  className: "label-text",
                  html:
                    '<span class="mapIconLabSpan">' +
                    data[i].DUTYNUM +
                    "</span>",
                  prjEzName: prjName,
                  prjFullName: prjFullNameVal,
                  dataNum: data[i].DUTYNUM
                })
              }).addTo(map);
              prjPointlabelGroup.push(markerlabel);
            }
            $vue.dutyPointBind(
              marker,
              prjName,
              data[i].PROJECTID,
              prjFullNameVal,
              data[i].PROJECTNO,
              data[i].ATTACHMENT2,
              data[i].PRJTYPE
            );
            //$vue.porPointBind(marker,prjName,data[i].PROJECTID);//绑定项目人员标记点事件
            prjPointGroup.push(marker);
            i++;
          }
        }, 20);
      }
    },
    toPersonOnDuty() {
      this.$router.push({
        path: "/personOnDuty",
        name: "personOnDuty",
        params: {
          projectId: this.projectId,
          prjName: this.prjname
        }
      });
    },
    dutyPointBind(
      marker,
      prjName,
      projectId,
      prjFullNameVal,
      projectNo,
      attachment,
      prjtype
    ) {
      marker.on("click", function(e) {
        // $vue.$router.push({
        //   path: "/personOnDuty",
        //   name: "personOnDuty",
        //   params: {
        //     projectId: projectId,
        //     prjName: prjName
        //   }
        // });
        $vue.dutyFlag = true;
        $vue.projectId = projectId;
        $vue.prjname = prjName;
        $vue.title = prjFullNameVal;
        $vue.projectNo = projectNo;
        $vue.attachment = attachment;
        $vue.prjtype = prjtype;
        // $vue.$ajax({
        //   url : $vue.COMMON_URL,
        //   method : 'post',
        //   data : {
        //     _method : "HOME_FIX_PERMISSION_MENU.getDutyPersonInfo",
        //     PROJECTID : projectId
        //   },
        //   async : false,
        // }).then(res=>{
        //   console.log("值班人员",res)
        //   //$vue.dutyPersonList = res.data.dutyPersonInfo.myArrayList
        //   $vue.getImgUrl(res)
        // })
      });
    },
    // getImgUrl(res){
    //       this.dutyPersonList = res.data.dutyPersonInfo.myArrayList;
    //       for(let i=0;i<this.dutyPersonList.length;i++){
    //           this.$ajax({
    //               url : this.COMMON_URL,
    //               method : 'post',
    //               data : {
    //                   _method : "FIX_ACC_FILE_INFO.getFileWebPath",
    //                   fieldToken : this.dutyPersonList[i].map.userPhoto
    //               },
    //               async : false,
    //           }).then(res=>{
    //               console.log(res)
    //               var length = res.data.data.length;
    //               var imgUrlStr = "";
    //               let data1 = this.dutyPersonList[i]
    //               if(length > 0){
    //                   var data = res.data.data[0];
    //                   imgUrlStr = data.FileUrl;
    //                   if(imgUrlStr.indexOf("tmpfiledownlaod/qhszpm/") != -1){
    //                       imgUrlStr = process.env.BASE_URL + '/qhszpm/' + imgUrlStr.substring(imgUrlStr.indexOf("tmpfiledownlaod/qhszpm/"));
    //                   }

    //                   data1['url'] = imgUrlStr
    //               }
    //               this.$set(this.dutyPersonList, i ,data1)
    //           })
    //       }

    //   },
    porPointBind(
      marker,
      prjName,
      projectId,
      prjFullNameVal,
      projectNo,
      attachment,
      prjtype
    ) {
      marker.on("click", function(e) {
        $vue.personProjectId = projectId;
        $vue.unitFlag = true;
        $vue.title = prjFullNameVal;
        $vue.projectNo = projectNo;
        $vue.attachment = attachment;
        $vue.prjtype = prjtype;
        $vue
          .$ajax({
            url: $vue.COMMON_URL,
            data: {
              _method: "HOME_FIX_PERMISSION_MENU.getProPersons",
              projectId: projectId
            },
            async: false,
            method: "post"
            // success:function(response){
            //     //console.log(response);
            //     data = response.data;
            //     dept = response.dept;
            //     dept1 = response.dept1;
            //     dept2 = response.dept2;
            //     dept3 = response.dept3;
            // }
          })
          .then(res => {
            console.log("unitInfo", res);
            $vue.jianliNum = res.data.data[0];
            $vue.jiansheNum = res.data.data[1];
            $vue.shejiNum = res.data.data[2];
            $vue.shigongNum = res.data.data[3];
            var dept = res.data.dept;
            var dept1 = res.data.dept1;
            var dept2 = res.data.dept2;
            var dept3 = res.data.dept3;
            //监理单位部门显示
            if (dept.length == 0) {
              $vue.jianliDept = "暂无数据";
            } else {
              for (var i = 0; i < dept.length; i++) {
                if (i == dept.length - 1) {
                  $vue.jianliDept += dept[i].NAME;
                } else {
                  $vue.jianliDept += dept[i].NAME + "、";
                }
              }
            }
            //建设单位部门显示
            if (dept1.length == 0) {
              $vue.jiansheDept = "暂无数据";
            } else {
              for (var i = 0; i < dept1.length; i++) {
                if (i == dept1.length - 1) {
                  $vue.jiansheDept += dept1[i].NAME;
                } else {
                  $vue.jiansheDept += dept1[i].NAME + "、";
                }
              }
            }
            //设计单位部门显示
            if (dept2.length == 0) {
              $vue.shejiDept = "暂无数据";
            } else {
              for (var i = 0; i < dept2.length; i++) {
                if (i == dept2.length - 1) {
                  $vue.shejiDept += dept2[i].NAME;
                } else {
                  $vue.shejiDept += dept2[i].NAME + "、";
                }
              }
            }
            //施工单位部门显示
            if (dept3.length == 0) {
              $vue.shigongDept = "暂无数据";
            } else {
              for (var i = 0; i < dept3.length; i++) {
                if (i == dept3.length - 1) {
                  $vue.shigongDept += dept3[i].NAME;
                } else {
                  $vue.shigongDept += dept3[i].NAME + "、";
                }
              }
            }
          });
      });
    },
    selectProPerson() {
      $("#proPerson").addClass("active");
      $("#dutyPerson").removeClass("active");
      $("#proBase").css("display", "block");
      $("#dutyBase").css("display", "none");
      this.personOrDuty = 0;
      this.showPerson();
      // this.getImgUrl();
      // this.rectifyImgFlag = false;
    },
    selectDutyPerson() {
      $("#proPerson").removeClass("active");
      $("#dutyPerson").addClass("active");
      $("#proBase").css("display", "none");
      $("#dutyBase").css("display", "block");
      this.personOrDuty = 1;
      this.showPerson();
      // this.getRectifyImgUrl();
      // this.rectifyImgFlag = true;
    },
    toPersonList() {
      console.log("传过去的id", this.personProjectId);
      //console.log("1111111111111");
      this.$router.push({
        path: "/personList",
        name: "personList",
        params: {
          projectId: this.personProjectId
        }
      });
    },
    showDanger() {
      this.menu = false;
      this.normalFlag = false;
      this.personFlag = false;
      this.switchShow = true;
      this.switchFlag = true;
      this.autoFlag = false;
      console.log("隐患隐患隐患");
      clearInterval(PointMark);
      var data = [];
      var params = '{"_method":"HOME_FIX_PERMISSION_MENU.getDangers"}';
      this.$ajax({
        url: this.COMMON_URL,
        data: {
          FixJSON: params
        },
        method: "post",
        async: false
      }).then(res => {
        console.log(res);
        data = res.data.data;
        this.drawDangerToMap(data);
      });
    },
    drawDangerToMap(data) {
      //处理经纬度
      for (var i = 0; i < data.length; i++) {
        var temp = data[i].CENTERPOSITION.substring(7);
        var temp1 = temp.substring(0, temp.indexOf(","));
        var temp2 = temp.substring(temp.indexOf(" ") + 1, temp.indexOf(")"));
        var temp3 = temp1 + "," + temp2;
        var arr = temp3.split(",");
        data[i].CENTERPOSITION = arr;
      }
      console.log(data);
      for (var i = 0; i < prjPointGroup.length; i++) {
        map.removeLayer(prjPointGroup[i]);
      }
      prjPointGroup.splice(0, prjPointGroup.length);
      for (var i = 0; i < porPointGroup.length; i++) {
        map.removeLayer(porPointGroup[i]);
      }
      porPointGroup.splice(0, porPointGroup.length);
      for (var i = 0; i < prjPointlabelGroup.length; i++) {
        map.removeLayer(prjPointlabelGroup[i]);
      }
      prjPointlabelGroup.splice(0, prjPointlabelGroup.length);
      var i = 0;
      PointMark = setInterval(function() {
        if (i < data.length) {
          var prjName = data[i].PRJPLACE;
          var prjFullNameVal = data[i].PROJECTNAME;
          var allDangers = data[i].ALLDANGERS;
          var proId = data[i].PROJECTID;
          var isPrjManag = data[i].ISPRJMANAG;
          var rectifyedNum = 0;
          if (data[i].NUM == "") {
            rectifyedNum = 0;
          } else if (
            data[i].NUM_0 != "undefined" &&
            data[i].RECTIFYSTATE_0 == "已整改"
          ) {
            rectifyedNum = data[i].NUM_0;
          } else if (
            data[i].NUM_1 != "undefined" &&
            data[i].RECTIFYSTATE_1 == "已整改"
          ) {
            rectifyedNum = data[i].NUM_1;
          } else if (
            data[i].NUM_2 != "undefined" &&
            data[i].RECTIFYSTATE_2 == "已整改"
          ) {
            rectifyedNum = data[i].NUM_2;
          }
          //							if(count[i].RECTIFYSTATE == '已整改' && count[i].CONSTRUCTPRO == prjName){
          //								rectifyedNum = count[i].NUM;
          //							}
          if (data[i].isEmpty == 0) {
            var marker = L.marker(data[i].CENTERPOSITION, {
              // icon: L.divIcon({
              //   className: "label-text",
              //   //onmouseover="overPor(this)" onmouseleave="leaveHidDanger(this)"
              //   html:
              //     '<div class="popdiv" style="width:auto;left:-50%;position: relative;z-index:1000;background:#FFAD14;white-space: nowrap;">' +
              //     prjName +
              //     "<lable>&nbsp;&nbsp;&nbsp;&nbsp;" +
              //     data[i].ALLDANGERS +
              //     '</lable></div><div class="leaflet-popup-tip-containerMark" style="left:-50%;position: relative;"><div class="leaflet-popup-tip" style="background-color:#FFAD14;opacity:0.9;"></div></div>',
              //   prjEzName: prjName,
              //   prjFullName: prjFullNameVal
              // })
              icon: L.icon({
                iconUrl: require("../../assets/img/hidDangerIconDisable.png"),
                iconSize: [34, 40],
                iconAnchor: [17, 27],
                popupAnchor: [11, 27],
                className: "pointIcon",
                prjEzName: prjName,
                prjFullName: prjFullNameVal,
                dataNum: data[i].isEmpty
              })
            });
          } else {
            var marker = L.marker(data[i].CENTERPOSITION, {
              icon: L.icon({
                iconUrl: require("../../assets/img/hidDangerIcon.png"),
                iconSize: [34, 40],
                iconAnchor: [17, 27],
                popupAnchor: [11, 27],
                className: "pointIcon",
                prjEzName: prjName,
                prjFullName: prjFullNameVal,
                dataNum: data[i].isEmpty
              })
            });
          }

          //如果有数据加载到map图层上
          if (data[i].isEmpty != 0) {
            marker.addTo(map);
            if (data[i].ALLDANGERS != 0) {
              var markerlabel = L.marker(data[i].CENTERPOSITION, {
                icon: L.divIcon({
                  className: "label-text",
                  html:
                    '<span class="mapIconLabSpan">' +
                    data[i].ALLDANGERS +
                    "</span>",
                  prjEzName: prjName,
                  prjFullName: prjFullNameVal,
                  dataNum: data[i].ALLDANGERS
                })
              }).addTo(map);
              prjPointlabelGroup.push(markerlabel);
            }
          }

          $vue.hidDanPointBind(
            marker,
            prjName,
            allDangers,
            rectifyedNum,
            proId,
            isPrjManag,
            prjFullNameVal,
            data[i].PROJECTNO,
            data[i].ATTACHMENT2,
            data[i].PRJTYPE,
            data[i].isEmpty
          ); //绑定项目人员标记点事件
          prjPointGroup.push(marker);
          i++;
        }
      }, 20);
    },
    hidDanPointBind(
      marker,
      prjName,
      allDangers,
      rectifyedNum,
      proId,
      isPrjManag,
      prjFullNameVal,
      projectNo,
      attachment,
      prjtype,
      isEmpty
    ) {
      //console.log(prjName)
      //var hidDanPointGroup = [];
      // marker.on('mouseover',function(e){
      //     console.log("marker is mouseover");
      //     $vue.dangerFlag = true;
      //     var myDate = new Date();
      //     var lastMonth = myDate.getMonth();
      //     $vue.month = lastMonth + "月";
      //     $vue.getHidDanScoreData(proId);

      // var popup = L.popup();
      // popup.setLatLng(e.latlng)
      //     .setContent('<div style="margin:10px"><div id="rectification'+proId+'" style="width:170px;height:127px;float:left"></div><div style="width:170px;height:127px;margin-left:190px"><div class="scoreRank"><h1>'+scoreDate.prjScore+'/'+scoreDate.scoreCount+'</h1><label>('+lastMonth+'月)</label></div></div></div>')
      //     .openOn(map);
      // setRectification(allDangers,rectifyedNum,proId);
      // hidDanPointGroup.push(popup);
      // });
      // marker.on('mouseout',function(e){
      //     console.log("marker is out");
      //     //$vue.dangerFlag = false;
      //     //map.removeLayer(hidDanPointGroup[0]);
      //     //hidDanPointGroup.pop();
      // });
      marker.on("click", function(e) {
        $vue.dangerFlag = true;
        var myDate = new Date();
        var lastMonth = myDate.getMonth();
        $vue.month = lastMonth + "月";
        $vue.attachment = attachment;
        $vue.prjtype = prjtype;
        $vue.projectNo = projectNo;
        $vue.title = prjFullNameVal;
        $vue.getHidDanScoreData(proId);
        $vue.setRectification(allDangers, rectifyedNum);
        //console.log("marker is clicked")
        $vue.isPrjManag = isPrjManag; //跳转至dangerlist页面使用
        $vue.projectId = proId;
        $vue.isEmpty = isEmpty;
      });
    },
    //生成整改情况echarts统计图
    setRectification(allDangers, rectifyedNum) {
      var danger = echarts.init(document.getElementById("danger"));
      var dangerOption = {
        backgroundColor: "#FFFFFF",
        color: ["#24B383", "#EEEEEE"],
        title: {
          text: "整改情况比例",
          textStyle: {
            color: "#333333",
            fontStyle: "normal",
            fontWeight: 400,
            fontFamily: "MicrosoftYaHei",
            fontSize: 14,
            align: "center"
          }
        },
        series: [
          {
            name: "整改情况比例",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "75%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center",
                textStyle: {
                  fontSize: 24,
                  fontWeight: "bold"
                },
                formatter: "{d}%"
              }
            },
            data: (function() {
              var data = [];
              if (allDangers == 0) {
                data.push({
                  value: 0,
                  name: "整改情况比例",
                  label: { normal: { show: true, formatter: "暂无" } }
                });
              } else {
                data.push({
                  value: rectifyedNum,
                  name: "整改情况比例",
                  label: { normal: { show: true } }
                });
                data.push({ value: allDangers, name: "" });
              }
              return data;
            })()
          }
        ]
      };
      danger.setOption(dangerOption);
    },
    getHidDanScoreData(proId) {
      var scoreData;
      this.$ajax({
        url: this.COMMON_URL,
        data: {
          _method: "HOME_FIX_PERMISSION_MENU.getSecurityRank",
          PROJECTID: proId
        },
        async: false,
        method: "post"
      }).then(res => {
        //console.log("score",res);
        scoreData = res.data.scoreData.map;
        var prjScore = scoreData.prjScore;
        var scoreCount = scoreData.scoreCount;
        $vue.score = prjScore + "/" + scoreCount;
      });
    },
    getDangerDetail() {
      if (this.isEmpty == 0) {
        return;
      } else {
        console.log("detail", this.isPrjManag);
        console.log("danger", this.projectId);
        this.$router.push({
          path: "/dangerList",
          name: "dangerList",
          params: {
            isPrjManag: this.isPrjManag,
            projectId: this.projectId
          }
        });
      }
    },
    showQuality() {
      this.menu = false;
      this.normalFlag = false;
      this.personFlag = false;
      this.switchShow = true;
      this.switchFlag = true;
      this.autoFlag = false;
      clearInterval(PointMark);
      console.log("缺陷缺陷缺陷");
      //this.getQualityPrjDataList();
      var data = [];
      var params = '{"_method":"HOME_FIX_PERMISSION_MENU.getQualities"}';
      this.$ajax({
        url: this.COMMON_URL,
        data: {
          FixJSON: params
        },
        method: "post",
        async: false
      }).then(res => {
        console.log(res);
        data = res.data.data;
        this.drawQualityToMap(data);
      });
    },
    drawQualityToMap(data) {
      //处理经纬度
      for (var i = 0; i < data.length; i++) {
        var temp = data[i].CENTERPOSITION.substring(7);
        var temp1 = temp.substring(0, temp.indexOf(","));
        var temp2 = temp.substring(temp.indexOf(" ") + 1, temp.indexOf(")"));
        var temp3 = temp1 + "," + temp2;
        var arr = temp3.split(",");
        data[i].CENTERPOSITION = arr;
      }
      console.log(data);
      for (var i = 0; i < prjPointGroup.length; i++) {
        map.removeLayer(prjPointGroup[i]);
      }
      prjPointGroup.splice(0, prjPointGroup.length);
      for (var i = 0; i < porPointGroup.length; i++) {
        map.removeLayer(porPointGroup[i]);
      }
      porPointGroup.splice(0, porPointGroup.length);
      for (var i = 0; i < prjPointlabelGroup.length; i++) {
        map.removeLayer(prjPointlabelGroup[i]);
      }
      prjPointlabelGroup.splice(0, prjPointlabelGroup.length);
      var i = 0;
      PointMark = setInterval(function() {
        if (i < data.length) {
          var prjName = data[i].PRJPLACE;
          var prjFullNameVal = data[i].PROJECTNAME;
          var allDangers = data[i].ALLDANGERS;
          var proId = data[i].PROJECTID;
          var isPrjManag = data[i].ISPRJMANAG;
          var rectifyedNum = 0;
          if (data[i].NUM == "") {
            rectifyedNum = 0;
          } else if (
            data[i].NUM_0 != "undefined" &&
            data[i].RECTIFYSTATE_0 == "已整改"
          ) {
            rectifyedNum = data[i].NUM_0;
          } else if (
            data[i].NUM_1 != "undefined" &&
            data[i].RECTIFYSTATE_1 == "已整改"
          ) {
            rectifyedNum = data[i].NUM_1;
          } else if (
            data[i].NUM_2 != "undefined" &&
            data[i].RECTIFYSTATE_2 == "已整改"
          ) {
            rectifyedNum = data[i].NUM_2;
          }
          //							if(count[i].RECTIFYSTATE == '已整改' && count[i].CONSTRUCTPRO == prjName){
          //								rectifyedNum = count[i].NUM;
          //							}
          if (data[i].isDataEmpty == 1) {
            var marker = L.marker(data[i].CENTERPOSITION, {
              // icon: L.divIcon({
              //   className: "label-text",
              //   //onmouseover="overPor(this)" onmouseleave="leaveHidDanger(this)"
              //   html:
              //     '<div class="popdiv" style="width:auto;left:-50%;position: relative;z-index:1000;background:#FF7E47;white-space: nowrap;">' +
              //     prjName +
              //     '<lable style="pointer-events: none;">&nbsp;&nbsp;&nbsp;&nbsp;' +
              //     data[i].ALLDANGERS +
              //     '</lable><label style="display:none">' +
              //     proId +
              //     '</label></div><div class="leaflet-popup-tip-containerMark" style="left:-50%;position: relative;"><div class="leaflet-popup-tip" style="background-color:#FF7E47;opacity:0.9;"></div></div>',
              //   prjEzName: prjName,
              //   prjFullName: prjFullNameVal
              // })
              icon: L.icon({
                iconUrl: require("../../assets/img/qualityIcon.png"),
                iconSize: [34, 40],
                iconAnchor: [17, 27],
                popupAnchor: [11, 27],
                className: "pointIcon",
                prjEzName: prjName,
                prjFullName: prjFullNameVal,
                dataNum: data[i].isDataEmpty
              })
            });
          } else {
            var marker = L.marker(data[i].CENTERPOSITION, {
              icon: L.icon({
                iconUrl: require("../../assets/img/qualityIconDisable.png"),
                iconSize: [34, 40],
                iconAnchor: [17, 27],
                popupAnchor: [11, 27],
                className: "pointIcon",
                prjEzName: prjName,
                prjFullName: prjFullNameVal,
                dataNum: data[i].isDataEmpty
              })
            });
          }
          if (data[i].isDataEmpty != 0) {
            marker.addTo(map);
            if (data[i].ALLDANGERS != 0) {
              var markerlabel = L.marker(data[i].CENTERPOSITION, {
                icon: L.divIcon({
                  className: "label-text",
                  html:
                    '<span class="mapIconLabSpan">' +
                    data[i].ALLDANGERS +
                    "</span>",
                  prjEzName: prjName,
                  prjFullName: prjFullNameVal,
                  dataNum: data[i].ALLDANGERS
                })
              }).addTo(map);
              prjPointlabelGroup.push(markerlabel);
            }
          }

          $vue.hidQuaPointBind(
            marker,
            prjName,
            allDangers,
            rectifyedNum,
            proId,
            isPrjManag,
            prjFullNameVal,
            data[i].PROJECTNO,
            data[i].ATTACHMENT2,
            data[i].PRJTYPE,
            data[i].isDataEmpty
          ); //绑定项目人员标记点事件
          prjPointGroup.push(marker);
          i++;
        }
      }, 20);
    },
    hidQuaPointBind(
      marker,
      prjName,
      allDangers,
      rectifyedNum,
      proId,
      isPrjManag,
      prjFullNameVal,
      projectNo,
      attachment,
      prjtype,
      isDataEmpty
    ) {
      marker.on("click", function(e) {
        $vue.qualityFlag = true;
        var myDate = new Date();
        var lastMonth = myDate.getMonth();
        $vue.attachment = attachment;
        $vue.prjtype = prjtype;
        $vue.projectNo = projectNo;
        $vue.title = prjFullNameVal;
        $vue.qualityMonth = lastMonth + "月";
        $vue.getQualityScoreData(proId);
        $vue.setQualityRectification(allDangers, rectifyedNum);
        //console.log("marker is clicked")
        //$vue.isPrjManag = isPrjManag;
        $vue.projectId = proId;
        $vue.isDataEmpty = isDataEmpty;
      });
    },
    setQualityRectification(allDangers, rectifyedNum) {
      var quality = echarts.init(document.getElementById("quality"));
      var qualityOption = {
        backgroundColor: "#FFFFFF",
        color: ["#24B383", "#EEEEEE"],
        title: {
          text: "整改情况比例",
          textStyle: {
            color: "#333333",
            fontStyle: "normal",
            fontWeight: 400,
            fontFamily: "MicrosoftYaHei",
            fontSize: 14,
            align: "center"
          }
        },
        series: [
          {
            name: "整改情况比例",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "75%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center",
                textStyle: {
                  fontSize: 24,
                  fontWeight: "bold"
                },
                formatter: "{d}%"
              }
            },
            data: (function() {
              var data = [];
              if (allDangers == 0) {
                data.push({
                  value: 0,
                  name: "整改情况比例",
                  label: { normal: { show: true, formatter: "暂无" } }
                });
              } else {
                data.push({
                  value: rectifyedNum,
                  name: "整改情况比例",
                  label: { normal: { show: true } }
                });
                data.push({ value: allDangers, name: "" });
              }
              return data;
            })()
          }
        ]
      };
      quality.setOption(qualityOption);
    },
    getQualityScoreData(proId) {
      var scoreData;
      this.$ajax({
        url: this.COMMON_URL,
        data: {
          _method: "PMQUALITY_RECTIFY.getScoreData",
          PROJECTID: proId
        },
        async: false,
        method: "post"
      }).then(res => {
        //console.log("score",res);
        scoreData = res.data.scoreData.map;
        var prjScore = scoreData.prjScore;
        var scoreCount = scoreData.scoreCount;
        $vue.qualityScore = prjScore + "/" + scoreCount;
      });
    },
    getQualityDetail() {
      if (this.isDataEmpty == 0) {
        return;
      } else {
        this.$router.push({
          path: "/qualityLists",
          name: "qualityLists",
          params: {
            projectId: this.projectId
          }
        });
      }
    },
    search() {
      // if (this.searchVal != "") {
      //   for (var i = 0; i < prjPointGroup.length; i++) {
      //     map.addLayer(prjPointGroup[i]);
      //     var prjEzName = prjPointGroup[i].options.icon.options.prjEzName;
      //     var prjFullName = prjPointGroup[i].options.icon.options.prjFullName;
      //     if (
      //       prjEzName.indexOf(this.searchVal) == -1 &&
      //       prjFullName.indexOf(this.searchVal) == -1
      //     ) {
      //       map.removeLayer(prjPointGroup[i]);
      //     }
      //   }
      // } else {
      //   for (var i = 0; i < prjPointGroup.length; i++) {
      //     map.addLayer(prjPointGroup[i]);
      //   }
      // }
      if (this.switchFlag) {
        if (this.searchVal != "") {
          for (var i = 0; i < prjPointGroup.length; i++) {
            map.addLayer(prjPointGroup[i]);
            var prjEzName = prjPointGroup[i].options.icon.options.prjEzName;
            var prjFullName = prjPointGroup[i].options.icon.options.prjFullName;
            if (
              (prjEzName.indexOf(this.searchVal) == -1 &&
                prjFullName.indexOf(this.searchVal) == -1) ||
              prjPointGroup[i].options.icon.options.dataNum == 0
            ) {
              map.removeLayer(prjPointGroup[i]);
            }
          }
          for (var i = 0; i < prjPointlabelGroup.length; i++) {
            map.addLayer(prjPointlabelGroup[i]);
            var prjEzName =
              prjPointlabelGroup[i].options.icon.options.prjEzName;
            var prjFullName =
              prjPointlabelGroup[i].options.icon.options.prjFullName;
            if (
              (prjEzName.indexOf(this.searchVal) == -1 &&
                prjFullName.indexOf(this.searchVal) == -1) ||
              prjPointlabelGroup[i].options.icon.options.dataNum == 0
            ) {
              map.removeLayer(prjPointlabelGroup[i]);
            }
          }
        } else {
          for (var i = 0; i < prjPointGroup.length; i++) {
            if (prjPointGroup[i].options.icon.options.dataNum != 0) {
              map.addLayer(prjPointGroup[i]);
            }
          }
          for (var i = 0; i < prjPointlabelGroup.length; i++) {
            if (prjPointlabelGroup[i].options.icon.options.dataNum != 0) {
              map.addLayer(prjPointlabelGroup[i]);
            }
          }
        }
      } else {
        if (this.searchVal != "") {
          for (var i = 0; i < prjPointGroup.length; i++) {
            map.addLayer(prjPointGroup[i]);
            var prjEzName = prjPointGroup[i].options.icon.options.prjEzName;
            var prjFullName = prjPointGroup[i].options.icon.options.prjFullName;
            if (
              prjEzName.indexOf(this.searchVal) == -1 &&
              prjFullName.indexOf(this.searchVal) == -1
            ) {
              map.removeLayer(prjPointGroup[i]);
            }
          }
          for (var i = 0; i < prjPointlabelGroup.length; i++) {
            map.addLayer(prjPointlabelGroup[i]);
            var prjEzName =
              prjPointlabelGroup[i].options.icon.options.prjEzName;
            var prjFullName =
              prjPointlabelGroup[i].options.icon.options.prjFullName;
            if (
              prjEzName.indexOf(this.searchVal) == -1 &&
              prjFullName.indexOf(this.searchVal) == -1
            ) {
              map.removeLayer(prjPointlabelGroup[i]);
            }
          }
        } else {
          for (var i = 0; i < prjPointGroup.length; i++) {
            map.addLayer(prjPointGroup[i]);
          }
          for (var i = 0; i < prjPointlabelGroup.length; i++) {
            map.addLayer(prjPointlabelGroup[i]);
          }
        }
      }
    },
    changeSwitchFlag(newVal, oldVal) {
      this.switchFlag = !this.switchFlag;
    },
    filtEmpt() {
      if (this.searchVal == "") {
        if (!this.switchFlag) {
          for (var i = 0; i < prjPointGroup.length; i++) {
            map.addLayer(prjPointGroup[i]);
          }
          for (var i = 0; i < prjPointlabelGroup.length; i++) {
            map.addLayer(prjPointlabelGroup[i]);
          }
        } else {
          for (var i = 0; i < prjPointGroup.length; i++) {
            map.addLayer(prjPointGroup[i]);
            if (prjPointGroup[i].options.icon.options.dataNum == 0) {
              map.removeLayer(prjPointGroup[i]);
            }
          }
          for (var i = 0; i < prjPointlabelGroup.length; i++) {
            map.addLayer(prjPointlabelGroup[i]);
          }
        }
      } else {
        if (!this.switchFlag) {
          for (var i = 0; i < prjPointGroup.length; i++) {
            map.addLayer(prjPointGroup[i]);
            var prjEzName = prjPointGroup[i].options.icon.options.prjEzName;
            var prjFullName = prjPointGroup[i].options.icon.options.prjFullName;
            if (
              prjEzName.indexOf(this.searchVal) == -1 &&
              prjFullName.indexOf(this.searchVal) == -1
            ) {
              map.removeLayer(prjPointGroup[i]);
            }
          }
          for (var i = 0; i < prjPointlabelGroup.length; i++) {
            map.addLayer(prjPointlabelGroup[i]);
            var prjEzName =
              prjPointlabelGroup[i].options.icon.options.prjEzName;
            var prjFullName =
              prjPointlabelGroup[i].options.icon.options.prjFullName;
            if (
              prjEzName.indexOf(this.searchVal) == -1 &&
              prjFullName.indexOf(this.searchVal) == -1
            ) {
              map.removeLayer(prjPointlabelGroup[i]);
            }
          }
        } else {
          for (var i = 0; i < prjPointGroup.length; i++) {
            map.addLayer(prjPointGroup[i]);
            var prjEzName = prjPointGroup[i].options.icon.options.prjEzName;
            var prjFullName = prjPointGroup[i].options.icon.options.prjFullName;
            if (
              prjPointGroup[i].options.icon.options.dataNum == 0 ||
              (prjEzName.indexOf(this.searchVal) == -1 &&
                prjFullName.indexOf(this.searchVal) == -1)
            ) {
              map.removeLayer(prjPointGroup[i]);
            }
          }
        }
      }
    },
    clear() {
      this.searchVal = "";
    },
    //自动化监测
    showAuto() {
      this.menu = false;
      this.personFlag = false;
      this.switchShow = false;
      this.switchFlag = false;
      this.normalFlag = false;
      this.autoFlag = true;
      clearInterval(PointMark);
      //获取自动化监测列表
      var params = { _method: "PMHSE_NEWADOT1.selectMore1" };
      let json = {
        FixJSON: JSON.stringify(params)
      };
      this.$ajax({
        url: this.COMMON_URL,
        method: "post",
        data: json
      }).then(res => {
        var data = res.data.RS;
        console.log("123", data);
        this.drawAutoToMap(data);
      });
    },

    drawAutoToMap(data) {
      for (var i = 0; i < prjPointGroup.length; i++) {
        map.removeLayer(prjPointGroup[i]);
      }
      prjPointGroup.splice(0, prjPointGroup.length);
      for (var i = 0; i < porPointGroup.length; i++) {
        map.removeLayer(porPointGroup[i]);
      }
      porPointGroup.splice(0, porPointGroup.length);
      for (var i = 0; i < prjPointlabelGroup.length; i++) {
        map.removeLayer(prjPointlabelGroup[i]);
      }
      prjPointlabelGroup.splice(0, prjPointlabelGroup.length);
      var i = 0;
      PointMark = setInterval(function() {
        //console.log(cu)
        //for(var i=0;i<autoDot.length;i++){
        if (i < data.length) {
          console.log(data[i]);
          //var positionToWgs84 = coordtransform.wgs84togcj02(position[1],position[0]);
          var lat = data[i].LATITUDE;
          var lon = data[i].LONGTITUDE;
          console.log(lat, lon);
          // var positionToWgs84 = wgs84togcj02(lon,lat);
          // lat=positionToWgs84[1];
          // lon=positionToWgs84[0];
          // console.log("pos",positionToWgs84)
          var dotname = data[i].AUTODOTNAME;
          var cumN = $vue.cum[$vue.cumdot.indexOf(dotname)];
          console.log("cumN=" + cumN);
          var icU = 0;
          if (cumN < 9) icU = 3;
          else if (cumN < 18) icU = 2;
          else if (cumN < 24) icU = 1;
          else if (cumN < 30) icU = 0;

          //var scheme=autoDot.AUTOSCHEME;
          //var object=autoDot.AUTOOBJECT;
          //var site=autoDot.SITE;
          //debugger
          var marker = L.marker([lat, lon], {
            /*icon:L.divIcon({
                  className:'label-text',
                  html:'<div class="popdiv" style="width:auto;left:-50%;position: relative;z-index:100;white-space: nowrap;" onmouseover="over(this,\''+prjGuid+'\',\''+positionStr+'\')" onmouseleave="leave(this)" onclick="prjClick(this);">'
                    + prjname+'<lable style="display:none">'+positionArea+'</lable><lable style="display:none">'+prjGuid+'</lable></div><div class="leaflet-popup-tip-containerMark" style="left:-50%;position: relative;"><div class="leaflet-popup-tip" style="background-color: #4D8AFF;opacity:0.9;"></div></div>',*/
            icon: L.icon({
              iconUrl: $vue.getAutoPic(icU),
              iconSize: [34, 40],
              iconAnchor: [17, 27],
              popupAnchor: [11, 27],
              className: "pointIcon",
              dotName: dotname
            })
          }).addTo(map);
          $vue.autoPointBind(marker, data[i]);
          prjPointGroup.push(marker);
          i++;
        }
      }, 20);
    },
    getAutoPic(index) {
      return require("@/assets/img/auto_" + index + ".png");
    },
    autoPointBind(marker, autoDot) {
      marker.on("click", function(e) {
        $vue.canvasStyle.width = $vue.canvasWidth + "px";
        $vue.autoScheme = autoDot.AUTOSCHEME;
        $vue.autoObject = autoDot.AUTOOBJECT;
        $vue.autoDotName = autoDot.AUTODOTNAME;
        $vue.getAutoData();
      });
    },
    getAutoData() {
      var params = {
        _method: "PMHSE_ADOTDATA.selectChange",
        dotName: this.autoDotName
      };
      let json = {
        FixJSON: JSON.stringify(params)
      };
      this.$ajax({
        url: this.COMMON_URL,
        method: "post",
        data: json
      }).then(res => {
        var list = res.data.list;
        if (list.length > 0) {
          this.showDialog = true;
          this.autoUnit = list[0].UNIT;
          for (var i = 0; i < list.length; i++) {
            this.autoDate.push(list[i].INPUTDATE.substring(0, 10));
            this.autoThisChange.push(list[i].THISCHANGE);
            this.autoCumChange.push(list[i].CUMCHANGE);
            this.autoRateChange.push(list[i].RATECHANGE);
          }
          this.drawAutoEcharts();
        } else {
          this.$vux.toast.show({
            type: "text",
            text: "暂无数据！",
            position: "center"
          });
        }
      });
    },
    drawAutoEcharts() {
      var myChart = echarts.init(document.getElementById("autoSafety"));

      var option = {
        title: {
          text: "自动化监测信息展示"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["变化量", "累计变化量", "变化率"]
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: $vue.autoDate
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value}" + $vue.autoUnit,
              fontSize : 6,
            }
          }
        ],
        series: [
          {
            name: "变化量",
            type: "line",
            data: $vue.autoThisChange,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          },
          {
            name: "累计变化量",
            type: "line",
            data: $vue.autoCumChange,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          },
          {
            name: "变化率",
            type: "line",
            data: $vue.autoRateChange,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          }
        ]
      };
      myChart.setOption(option);
      //防止二次点击时重复加载数据
      this.autoUnit = "";
      this.autoDate = [];
      this.autoThisChange = [];
      this.autoCumChange = [];
      this.autoRateChange = [];
    },
    //传统监测
    showNormal() {
      this.menu = false;
      this.normalFlag = true;
      this.personFlag = false;
      this.switchShow = false;
      this.switchFlag = false;
      this.autoFlag = false;
      clearInterval(PointMark);
      //获取传统监测点列表
      var params = { _method: "PMHSE_TRADATAIN.selectMore1" };
      let json = {
        FixJSON: JSON.stringify(params)
      };
      this.$ajax({
        url: this.COMMON_URL,
        method: "post",
        data: json
      }).then(res => {
        var data = res.data.RS;
        this.drawNormalToMap(data);
      });
    },
    drawNormalToMap(data) {
      for (var i = 0; i < prjPointGroup.length; i++) {
        map.removeLayer(prjPointGroup[i]);
      }
      prjPointGroup.splice(0, prjPointGroup.length);
      for (var i = 0; i < porPointGroup.length; i++) {
        map.removeLayer(porPointGroup[i]);
      }
      porPointGroup.splice(0, porPointGroup.length);
      for (var i = 0; i < prjPointlabelGroup.length; i++) {
        map.removeLayer(prjPointlabelGroup[i]);
      }
      porPointGroup.splice(0, porPointGroup.length);
      var i = 0;
      if (this.flag == 0) {
        PointMark = setInterval(function() {
          //for(var i=0;i<autoDot.length;i++){
          if (i < data.length) {
            console.log(data[i]);
            var dotname = data[i].DOTNAME;
            var lat = data[i].LATITUDE;
            var lon = data[i].LONGITUDE;
            // var positionToWgs84 = coordtransform.wgs84togcj02(lon, lat);
            // lat = positionToWgs84[1];
            // lon = positionToWgs84[0];
            var pro = data[i].TRAPRO;
            var obj = data[i].TRAOBJECT;
            var cumN = $vue.cumT[$vue.cumdotT.indexOf(dotname)];
            var cumChange;
            var rateChange;
            var change;
            var minDate = "";
            var maxDate = "";
            //console.log(cumdotT.indexOf(dotname))
            console.log("obj=" + obj);
            console.log("pro=" + pro);
            var icU = 0;
            var params = {
              _method: "PMHSE_TRADATAIN.selectChange",
              dotName: dotname,
              traPro: obj,
              minDate: minDate,
              maxDate: maxDate
            };
            let json = {
              FixJSON: JSON.stringify(params)
            };
            $vue
              .$ajax({
                url: $vue.COMMON_URL,
                method: "post",
                data: json
              })
              .then(res => {
                var list = res.data.list;
                $vue.cumChange = list[0].CUMCHANGE;
                $vue.rateChange = list[0].RATECHANGE;
              });

            console.log($vue.cumChange);
            var cChange = Math.abs($vue.cumChange);
            var rChange = Math.abs($vue.rateChange);

            if (obj == "基岩基准点") {
              icU = 10;
              i++;
            }

            if (pro == "沉降监测") {
              console.log("cChange=" + cChange);
              if (cChange < 3) icU = 3;
              else if (cChange < 6) icU = 2;
              else if (cChange < 8) icU = 1;
              else if (cChange < 10) icU = 0;
            } else if (pro == "倾斜监测") {
              console.log("rChange=" + rChange);
              if (rChange < 0.6) icU = 3;
              else if (rChange < 1.2) icU = 2;
              else if (rChange < 1.6) icU = 1;
              else if (rChange < 2) icU = 0;
            }

            //debugger

            var marker = L.marker([lat, lon], {
              /*icon:L.divIcon({
						className:'label-text',
						html:'<div class="popdiv" style="width:auto;left:-50%;position: relative;z-index:100;white-space: nowrap;" onmouseover="over(this,\''+prjGuid+'\',\''+positionStr+'\')" onmouseleave="leave(this)" onclick="prjClick(this);">'
							+ prjname+'<lable style="display:none">'+positionArea+'</lable><lable style="display:none">'+prjGuid+'</lable></div><div class="leaflet-popup-tip-containerMark" style="left:-50%;position: relative;"><div class="leaflet-popup-tip" style="background-color: #4D8AFF;opacity:0.9;"></div></div>',*/
              icon: L.icon({
                iconUrl: $vue.getPic(icU),
                iconSize: [24, 24],
                iconAnchor: [17, 27],
                popupAnchor: [11, 27],
                className: "pointIcon",
                dotName: dotname
              })
            }).addTo(map);
            $vue.traPointBind(marker, data[i]);
            i++;
            prjPointGroup.push(marker);
          }
        }, 20);
      } else {
        PointMark = setInterval(function() {
          //for(var i=0;i<autoDot.length;i++){
          if (i < data.length) {
            console.log(data[i]);
            var dotname = data[i].DOTNAME;
            var lat = data[i].LATITUDE;
            var lon = data[i].LONGITUDE;
            // var positionToWgs84 = coordtransform.wgs84togcj02(lon, lat);
            // lat = positionToWgs84[1];
            // lon = positionToWgs84[0];
            var pro = data[i].TRAPRO;
            var obj = data[i].TRAOBJECT;
            var cumN = $vue.cumT[$vue.cumdotT.indexOf(dotname)];

            console.log("obj=" + obj);
            console.log("pro=" + pro);
            var icU = 0;
            if (obj == "基岩基准点") icU = 4;
            else {
              icU = 10;
              i++;
            }

            var marker = L.marker([lat, lon], {
              /*icon:L.divIcon({
							className:'label-text',
							html:'<div class="popdiv" style="width:auto;left:-50%;position: relative;z-index:100;white-space: nowrap;" onmouseover="over(this,\''+prjGuid+'\',\''+positionStr+'\')" onmouseleave="leave(this)" onclick="prjClick(this);">'
								+ prjname+'<lable style="display:none">'+positionArea+'</lable><lable style="display:none">'+prjGuid+'</lable></div><div class="leaflet-popup-tip-containerMark" style="left:-50%;position: relative;"><div class="leaflet-popup-tip" style="background-color: #4D8AFF;opacity:0.9;"></div></div>',*/
              icon: L.icon({
                iconUrl: $vue.getPic(icU),
                iconSize: [24, 24],
                iconAnchor: [17, 27],
                popupAnchor: [11, 27],
                className: "pointIcon",
                dotName: dotname
              })
            }).addTo(map);
            $vue.traPointBind(marker, data[i]);
            i++;
            prjPointGroup.push(marker);
          }
        }, 20);
      }
    },
    traPointBind(marker, traDot) {
      marker.on("click", function(e) {
        $vue.canvasStyle.width = $vue.canvasWidth + "px";
        $vue.normalScheme = traDot.TRASCHEME;
        $vue.normalObject = traDot.TRAOBJECT;
        $vue.normalDotName = traDot.DOTNAME;
        $vue.normalProject = traDot.TRAPRO;
        $vue.getNormalData();
      });
    },
    getNormalData() {
      var params = {
        _method: "PMHSE_TRADATAIN.selectChange",
        dotName: this.normalDotName,
        traPro: this.normalObject,
        maxDate: "",
        minDate: ""
      };
      let json = {
        FixJSON: JSON.stringify(params)
      };
      this.$ajax({
        url: this.COMMON_URL,
        method: "post",
        data: json
      }).then(res => {
        console.log(res);
        var list = res.data.list;
        if (list.length > 0) {
          this.showNormalDialog = true;
          this.normalUnit = list[0].UNIT.replace(/(^\s*)|(\s*$)/g, "");
          for (var i = 0; i < list.length; i++) {
            this.normalDate.push(list[i].INPUTDATE.substring(0, 10));
            this.normalThisChange.push(list[i].THISCHANGE);
            this.normalCumChange.push(list[i].CUMCHANGE);
            this.normalRateChange.push(list[i].RATECHANGE);
          }
          this.drawNormalEcharts();
        } else {
          this.$vux.toast.show({
            type: "text",
            text: "暂无数据！",
            position: "center"
          });
        }
      });
    },
    drawNormalEcharts() {
      var myChart = echarts.init(document.getElementById("normalSafety"));

      var option = {
        title: {
          text: "传统监测信息展示"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["变化量", "累计变化量", "变化率"]
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: $vue.normalDate
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value}" + $vue.normalUnit,
              fontSize: 6
            }
          }
        ],
        series: [
          {
            name: "变化量",
            type: "line",
            data: $vue.normalThisChange,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          },
          {
            name: "累计变化量",
            type: "line",
            data: $vue.normalCumChange,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          },
          {
            name: "变化率",
            type: "line",
            data: $vue.normalRateChange,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          }
        ]
      };
      myChart.setOption(option);
      //防止二次点击时重复加载数据
      this.normalUnit = "";
      this.normalDate = [];
      this.normalThisChange = [];
      this.normalCumChange = [];
      this.normalRateChange = [];
    },
    selectTraDot() {
      $("#bridge").addClass("active");
      $("#bedrockDatumPoint").removeClass("active");
      $("#bridgeBase").css("display", "block");
      $("#bedrockDatumPointBase").css("display", "none");
      this.flag = 0;
      this.showNormal();
    },
    selectTraDot1() {
      $("#bridge").removeClass("active");
      $("#bedrockDatumPoint").addClass("active");
      $("#bridgeBase").css("display", "none");
      $("#bedrockDatumPointBase").css("display", "block");
      this.flag = 1;
      this.showNormal();
    },
    getPic(index) {
      console.log("index", index);
      return require("@/assets/img/tradot_" + index + ".png");
    }
  },
  watch: {
    searchVal() {
      this.search();
    },
    switchFlag() {
      this.filtEmpt();
    },
    menu() {
      if (this.menu) {
        this.personFlag = false;
      }
    }
  }
  // created(){
  //     let obj = document.getElementsByClassName("popdiv")
  //     //console.log("hahah")
  //     obj.addEventListener("click",this.prjClick,false)
  // },
  // beforeDestroy(){
  //     let obj = document.getElementsByClassName("popdiv")
  //     obj.removeEventListener("click",this.prjClick,false)
  // }
};
</script>

<style scoped>
.unit_num {
  padding: 0 18px;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 20px;
}
.unit_dept {
  padding: 0 18px;
  font-size: 16px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(25, 25, 25, 1);
  line-height: 20px;
}
.unit {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 33px;
}
.unit_img {
  width: 20px;
  height: 20px;
  padding: 8px;
}
.unit_title_div {
  display: flex;
  padding: 10px;
}
.select_div {
  text-align: center;
  text-align: -webkit-center;
}
.baseLine {
  width: 16px;
  height: 3px;
  background: #4d86ff;
  border-radius: 3px;
}
.person_popup {
  background-color: #ffffff;
  width: 70%;
  margin-left: 15%;
  margin-bottom: 5%;
}
.tab_div {
  display: flex;
  height: 60px;
  justify-content: space-around;
  align-items: center;
}
.tab {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(179, 181, 186, 1);
  line-height: 20px;
}
.active {
  color: #4d86ff;
}
.mapDiv {
  width: 100%;
  height: 100%;
}
.search {
  z-index: 500;
  position: absolute;
  top: 5%;
  left: 5%;
  background-color: #ffffff;
  width: 70%;
  height: 48px;
  display: flex;
  justify-content: left;
  align-items: center;
}
.back_search {
  width: 16px;
  height: 16px;
  margin-left: 10px;
  /* margin-top: 15px; */
}
.input_search {
  border: none;
  outline: medium;
  margin-left: 10px;
  line-height: 25px;
  /* position: relative;
  height: 80%;
  width: calc(100% - 65px);
  bottom: 3px;
  line-height: normal; */
}
.clear {
  width: 18px;
  height: 18px;
}
.back {
  z-index: 500;
  position: absolute;
  top: 5%;
  left: 80%;
  background-color: #ffffff;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu {
  z-index: 500;
  position: absolute;
  top: 15%;
  left: 80%;
  background-color: #ffffff;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.type {
  background-color: #ffffff;
  margin-bottom: 5%;
  width: 48px;
  height: fit-content;
  position: absolute;
  overflow: hidden;
  z-index: 500;
  top: 15%;
  left: 80%;
  display: flex;
  flex-direction: column;
}
.type_item {
  padding: 10px 10px;
}
.info {
  padding: 15px;
}
.scoreRank {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}
.scoreRank h1 {
  color: #000000;
  font-weight: bold;
}
.scoreRank label {
  color: #000000;
  font-size: large;
}
.introduce {
  position: relative;
  left: 15px;
  margin-top: 10px;
  margin-right: 10px;
}
.echarts_photo {
  display: flex;
  flex-direction: column;
  width: 50%;
  text-align: -webkit-center;
}
input::placeholder {
  font-size: 15px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(204, 204, 204, 1);
  line-height: normal;
}
.transition-view .mapDiv /deep/ .leaflet-control-layers-toggle {
  display: none;
}
/* .transition-view /deep/ .type .weui-tabbar__item .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{
    color: #4D8AFF !important;
} */
.afterTitle {
  font-size: 15px;
  font-family: MicrosoftYaHeiUI;
  font-weight: bold;
  color: rgba(75, 75, 75, 1);
  height: 70px;
  padding: 10px 0;
}
.afterStyle {
  font-size: 15px;
  color: #7d7d7d;
}
.afterDiv {
  display: flex;
}
.img_div {
  padding: 10px;
}
.user_nophoto {
  width: 50px;
  height: 50px;
  background: linear-gradient(
    180deg,
    rgba(106, 135, 255, 1),
    rgba(77, 102, 254, 1)
  );
  border-radius: 50%;
  font-size: 12px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text_area {
  display: flex;
  width: calc(100% - 70px);
  border-bottom: 1px solid #f5f5f5;
  padding: 10px 0;
}
.username {
  font-size: 16px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(25, 25, 25, 1);
  line-height: 20px;
}
.same_text {
  font-size: 13px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 20px;
}
.line_img {
  width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 5px;
  margin-right: 5%;
}
.userphoto {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.switch {
  /* margin-top: 5%; */
  width: 38px;
  height: fit-content;
  position: absolute;
  overflow: hidden;
  z-index: 500;
  top: 25%;
  left: 77%;
  display: flex;
  flex-direction: column;
}
.autoInfo {
  text-align: left;
  margin-left: 10px;
  margin-bottom: 10px;
}
.autoRemarks {
  position: absolute;
  top: 60%;
  background: rgba(9, 14, 22, 0.4);
  border-radius: 5px;
  z-index: 500;
}
.autoRemarkImg {
  width: 24px;
  height: 24px;
}
.autoRemarkText {
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 20px;
  opacity: 0.8;
}
.autoRemarkDiv {
  display: flex;
  align-items: center;
  justify-content: start;
  margin: 10px;
}
.menuImg{
  width: 24px !important;
  height: 24px !important;
}
.weui-grids /deep/ .menuItem .weui-grid__label{
  font-size:15px ;
  font-family:PingFang SC ;
  font-weight:400 ;
  color:rgba(155,160,170,1) !important;
  line-height:20px ;
  white-space: normal;
}
.weui-grids /deep/ .menuItem .weui-grid__icon{
  background: rgba(255,255,255,1);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  max-width: 52px;
  max-height: 52px;
}
.vux-popup-dialog{
      background: #fff;
}
.weui-grids:before{
  border-top:none
}
.weui-grids{
  margin-top: 20px
}
.menuTitle{
  font-size:15px;
  font-family:PingFang SC;
  font-weight:600;
  color:rgba(49,49,49,1);
  line-height:20px;
  margin: 25px;
}
.menuPop{
  overflow: hidden;
}
.switch /deep/ .weui-cell__ft .weui-switch:checked{
  border-color: #36C18F;
  background-color: #36C18F;
}
</style>
